<!-- 波形动态播放器 - I/Q数据三维时频播放 -->
<template>
  <div class="waveform-player">
    <!-- 播放器控制栏 -->
    <div class="player-controls">
      <div class="controls-left">
        <h3 class="player-title">
          <el-icon><VideoPlay /></el-icon>
          I/Q波形动态播放器
        </h3>
        <div class="signal-info">
          <el-tag size="small" type="info">{{ currentSignal.frequency }}</el-tag>
          <el-tag size="small" type="success">{{ currentSignal.bandwidth }}</el-tag>
          <el-tag size="small" type="warning">{{ currentSignal.modulation }}</el-tag>
        </div>
      </div>
      
      <div class="controls-right">
        <el-button-group size="small">
          <el-button @click="togglePlay" :type="isPlaying ? 'danger' : 'primary'">
            <el-icon><VideoPlay v-if="!isPlaying" /><VideoPause v-else /></el-icon>
            {{ isPlaying ? '暂停' : '播放' }}
          </el-button>
          <el-button @click="resetPlayer">
            <el-icon><RefreshRight /></el-icon>
            重置
          </el-button>
        </el-button-group>
      </div>
    </div>

    <!-- 三维时频图容器 -->
    <div class="waveform-container" ref="waveformContainer">
      <canvas ref="waveformCanvas" class="waveform-canvas"></canvas>
      
      <!-- WebGL渲染遮盖层 -->
      <div class="webgl-overlay">
        <div class="axis-labels">
          <div class="axis-label x-axis">时间 (ms)</div>
          <div class="axis-label y-axis">频率 (MHz)</div>
          <div class="axis-label z-axis">幅度 (dB)</div>
        </div>
      </div>
    </div>

    <!-- 播放进度和参数控制 -->
    <div class="player-params">
      <div class="progress-section">
        <div class="progress-label">播放进度</div>
        <el-slider
          v-model="playProgress"
          :max="100"
          :step="0.1"
          @change="onProgressChange"
          class="progress-slider"
        />
        <div class="time-display">{{ currentTime }} / {{ totalTime }}</div>
      </div>
      
      <div class="param-controls">
        <div class="param-group">
          <label>播放速度</label>
          <el-slider
            v-model="playSpeed"
            :min="0.1"
            :max="5"
            :step="0.1"
            @change="onSpeedChange"
            class="speed-slider"
          />
          <span class="param-value">{{ playSpeed }}x</span>
        </div>
        
        <div class="param-group">
          <label>视角旋转</label>
          <el-slider
            v-model="viewRotation"
            :min="0"
            :max="360"
            @change="onRotationChange"
            class="rotation-slider"
          />
          <span class="param-value">{{ viewRotation }}°</span>
        </div>
        
        <div class="param-group">
          <label>幅度缩放</label>
          <el-slider
            v-model="amplitudeScale"
            :min="0.5"
            :max="3"
            :step="0.1"
            @change="onScaleChange"
            class="scale-slider"
          />
          <span class="param-value">{{ amplitudeScale }}x</span>
        </div>
      </div>
    </div>

    <!-- 信号参数面板 -->
    <div class="signal-params">
      <div class="params-row">
        <div class="param-item">
          <label>采样率</label>
          <span class="param-display">{{ currentSignal.sampleRate }}</span>
        </div>
        <div class="param-item">
          <label>数据长度</label>
          <span class="param-display">{{ currentSignal.dataLength }}</span>
        </div>
        <div class="param-item">
          <label>信噪比</label>
          <span class="param-display">{{ currentSignal.snr }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { VideoPlay, VideoPause, RefreshRight } from '@element-plus/icons-vue'

// 播放状态
const isPlaying = ref(false)
const playProgress = ref(0)
const currentTime = ref('00:00:00')
const totalTime = ref('00:05:30')

// 播放参数
const playSpeed = ref(1.0)
const viewRotation = ref(45)
const amplitudeScale = ref(1.0)

// 当前信号信息
const currentSignal = reactive({
  frequency: '2.4 GHz',
  bandwidth: '20 MHz', 
  modulation: 'QPSK',
  sampleRate: '40 MSPS',
  dataLength: '1M samples',
  snr: '25 dB'
})

// DOM引用
const waveformContainer = ref(null)
const waveformCanvas = ref(null)

// WebGL相关变量
let gl = null
let animationFrame = null
let startTime = Date.now()

// 模拟I/Q数据生成
const generateIQData = (timeStamp) => {
  const data = []
  const samples = 1024
  const baseFreq = 0.1
  
  for (let i = 0; i < samples; i++) {
    const t = (timeStamp + i) * 0.001
    const freq = baseFreq + 0.05 * Math.sin(t * 0.5)
    
    // I分量
    const I = Math.cos(2 * Math.PI * freq * t) * amplitudeScale.value
    // Q分量  
    const Q = Math.sin(2 * Math.PI * freq * t) * amplitudeScale.value
    
    data.push({ i: I, q: Q, t: t, freq: freq })
  }
  
  return data
}

// 初始化WebGL
const initWebGL = () => {
  const canvas = waveformCanvas.value
  if (!canvas) return
  
  canvas.width = canvas.offsetWidth
  canvas.height = canvas.offsetHeight
  
  gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl')
  if (!gl) {
    console.error('WebGL not supported')
    return
  }
  
  // 设置视口
  gl.viewport(0, 0, canvas.width, canvas.height)
  gl.clearColor(0.1, 0.1, 0.15, 1.0)
  gl.enable(gl.DEPTH_TEST)
  
  // 开始渲染循环
  renderLoop()
}

// 渲染循环
const renderLoop = () => {
  if (!gl || !isPlaying.value) {
    if (isPlaying.value) {
      animationFrame = requestAnimationFrame(renderLoop)
    }
    return
  }
  
  const currentTimeStamp = (Date.now() - startTime) * playSpeed.value
  
  // 清空画布
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
  
  // 生成当前帧的I/Q数据
  const iqData = generateIQData(currentTimeStamp)
  
  // 渲染3D时频图
  render3DWaveform(iqData)
  
  // 更新进度
  updateProgress(currentTimeStamp)
  
  animationFrame = requestAnimationFrame(renderLoop)
}

// 渲染3D波形
const render3DWaveform = (iqData) => {
  // 这里实现WebGL 3D渲染逻辑
  // 由于复杂性，这里提供简化版本
  
  // 设置变换矩阵
  const rotationRad = (viewRotation.value * Math.PI) / 180
  
  // 绘制I/Q数据点
  iqData.forEach((point, index) => {
    const x = (index / iqData.length - 0.5) * 2
    const y = point.freq * 2 - 1
    const z = (Math.sqrt(point.i * point.i + point.q * point.q)) * 0.5
    
    // 应用旋转和缩放
    // WebGL渲染代码...
  })
}

// 更新播放进度
const updateProgress = (timeStamp) => {
  const totalDuration = 5.5 * 60 * 1000 // 5分30秒
  const progress = (timeStamp % totalDuration) / totalDuration * 100
  playProgress.value = progress
  
  const current = Math.floor(timeStamp / 1000)
  const minutes = Math.floor(current / 60)
  const seconds = current % 60
  currentTime.value = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}:${Math.floor((timeStamp % 1000) / 10).toString().padStart(2, '0')}`
}

// 播放控制
const togglePlay = () => {
  isPlaying.value = !isPlaying.value
  if (isPlaying.value) {
    startTime = Date.now() - (playProgress.value / 100) * 5.5 * 60 * 1000
    renderLoop()
  } else {
    if (animationFrame) {
      cancelAnimationFrame(animationFrame)
    }
  }
}

const resetPlayer = () => {
  isPlaying.value = false
  playProgress.value = 0
  currentTime.value = '00:00:00'
  startTime = Date.now()
  
  if (animationFrame) {
    cancelAnimationFrame(animationFrame)
  }
  
  // 清空画布
  if (gl) {
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
  }
}

// 参数变化处理
const onProgressChange = (value) => {
  startTime = Date.now() - (value / 100) * 5.5 * 60 * 1000
}

const onSpeedChange = () => {
  // 播放速度改变
}

const onRotationChange = () => {
  // 视角旋转改变
}

const onScaleChange = () => {
  // 幅度缩放改变
}

// 生命周期
onMounted(() => {
  nextTick(() => {
    initWebGL()
  })
})

onBeforeUnmount(() => {
  if (animationFrame) {
    cancelAnimationFrame(animationFrame)
  }
})
</script>

<style scoped>
.waveform-player {
  width: 100%;
  height: 100%;
  background: #1f2d3d;
  border-radius: 1vh;
  padding: 2vh;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}

/* 播放器控制栏 */
.player-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5vh 2vh;
  background: linear-gradient(135deg, #263445, #2d3a4b);
  border-radius: 0.8vh;
  border: 1px solid #3a4a5c;
}

.controls-left {
  display: flex;
  align-items: center;
  gap: 2vw;
}

.player-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #bfcbd9;
  display: flex;
  align-items: center;
  gap: 0.8vw;
}

.signal-info {
  display: flex;
  gap: 0.8vw;
}

/* 波形容器 */
.waveform-container {
  flex: 1;
  position: relative;
  background: #0a0f1b;
  border-radius: 0.8vh;
  border: 1px solid #2d3a4b;
  overflow: hidden;
  min-height: 40vh;
}

.waveform-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.webgl-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.axis-labels {
  position: relative;
  width: 100%;
  height: 100%;
}

.axis-label {
  position: absolute;
  color: #8591a3;
  font-size: 0.8rem;
  font-weight: 500;
}

.x-axis {
  bottom: 1vh;
  left: 50%;
  transform: translateX(-50%);
}

.y-axis {
  left: 1vh;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
}

.z-axis {
  right: 1vh;
  top: 1vh;
}

/* 播放参数控制 */
.player-params {
  background: #263445;
  border-radius: 0.8vh;
  padding: 2vh;
  border: 1px solid #2d3a4b;
}

.progress-section {
  display: flex;
  align-items: center;
  gap: 2vw;
  margin-bottom: 2vh;
}

.progress-label {
  color: #bfcbd9;
  font-weight: 500;
  min-width: 6vw;
}

.progress-slider {
  flex: 1;
}

.time-display {
  color: #8591a3;
  font-family: 'Monaco', 'Consolas', monospace;
  font-size: 0.9rem;
  min-width: 8vw;
  text-align: right;
}

.param-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3vw;
}

.param-group {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.param-group label {
  color: #bfcbd9;
  font-size: 0.85rem;
  font-weight: 500;
}

.param-value {
  color: #409EFF;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
}

/* 信号参数面板 */
.signal-params {
  background: #263445;
  border-radius: 0.8vh;
  padding: 1.5vh 2vh;
  border: 1px solid #2d3a4b;
}

.params-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3vw;
}

.param-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.param-item label {
  color: #8591a3;
  font-size: 0.8rem;
}

.param-display {
  color: #409EFF;
  font-weight: 500;
  font-size: 0.85rem;
}

/* Element Plus 组件样式覆盖 */
:deep(.el-button) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
}

:deep(.el-button:hover) {
  background: #2d3a4b !important;
  border-color: #409EFF !important;
  color: #409EFF !important;
}

:deep(.el-button--primary) {
  background: #409EFF !important;
  border-color: #409EFF !important;
  color: #ffffff !important;
}

:deep(.el-button--danger) {
  background: #F56C6C !important;
  border-color: #F56C6C !important;
  color: #ffffff !important;
}

:deep(.el-slider__runway) {
  background: #2d3a4b !important;
}

:deep(.el-slider__bar) {
  background: #409EFF !important;
}

:deep(.el-slider__button) {
  background: #409EFF !important;
  border-color: #409EFF !important;
}

:deep(.el-tag) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
}

:deep(.el-tag--success) {
  background: #1f4838 !important;
  color: #67C23A !important;
}

:deep(.el-tag--warning) {
  background: #4a3c1d !important;
  color: #E6A23C !important;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .param-controls {
    grid-template-columns: 1fr;
    gap: 2vh;
  }
  
  .params-row {
    grid-template-columns: 1fr;
    gap: 1vh;
  }
}

@media (max-width: 768px) {
  .controls-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 1vh;
  }
  
  .progress-section {
    flex-direction: column;
    gap: 1vh;
  }
  
  .progress-label,
  .time-display {
    min-width: auto;
    text-align: left;
  }
}
</style>